<template>
	<div class="app">
		<div class="login">
		
			<div class="top">
				<div class="title">
					<img src="../assets/yellow.png"/>
					<h1>elmSSMPro</h1>
				</div>
				<p>栀子花 &#9998 will be an excellent engineer</p>
			</div>
			<el-row :gutter="20">
			    <el-col :span="18" :offset="6">
			      <el-form
			          ref="ruleFormRef"
			          style="max-width: 600px"
			          :model="ruleForm"
			          status-icon
			          :rules="rules"
			          label-width="auto"
			          class="demo-ruleForm"
			        >
					  <el-form-item label="用户名" prop="userName">
						<el-input v-model="ruleForm.userName" type="text" autocomplete="off" />
					  </el-form-item>
			          <el-form-item label="密码" prop="password">
			            <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
			          </el-form-item>
			          <el-form-item>
			            <el-button type="primary" @click="submitForm">登录</el-button>
			            <el-button @click="resetForm">重置</el-button>
			          </el-form-item>
			        </el-form>
			    </el-col>
			</el-row>
		</div>
	</div>
	
</template>

<script  setup>
import { ElMessage } from 'element-plus';
import { reactive, ref , getCurrentInstance,onMounted} from 'vue'


	//获取当前实例   方便发送axios请求
    let {proxy} = getCurrentInstance();

    //通过ref属性值来获取Form元素
	const ruleFormRef = ref(null);

	const ruleForm = reactive({
	  userName: '',//userName
	  password: ''
	})

    //表单校验规则
    const rules = {
      userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 4, message: '用户名不能小于4位', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ]
    }
	
	//点击登录调用
	const submitForm = () => {
		  //校验表单
	      ruleFormRef.value.validate((valid) => {
	        if (valid) {
				console.log('发送登录请求!')
				//校验成功  发送登录请求
	          proxy.$axios({
				  method: 'post',
				  url: '/log/in', // /log/in
				  data: ruleForm
			  }).then(res=>{
				  let resultBean = res.data;
				  if(resultBean.code == 200){
					  window.localStorage.setItem("adminUser",resultBean.data);
					  proxy.$router.push("/main");
				  }else{
					  ElMessage.error(resultBean.msg);
				  }
			  })
	        } else {
	          console.log('提交失败!')
	          return false
	        }
	      })
	    }
	
	    //表单重置
	    const resetForm = () => {
	      ruleFormRef.value.resetFields()
	    }

</script>


<style scoped>
	.app{
		width: 100%;
		height: 835px;
		background-image: url("../assets/background.jpg");
		background-size: cover;
		position: relative;
	}
	
	.app .login nav{
		text-align: center;
		font-size: 20px;
		
	}
	.app .login nav a {
	  
	  color: #2c3e50;
	}
	
	.app .login nav a.router-link-exact-active {
		/* 设置当前访问页面的颜色 */
	  color: #8e9fca;
	}
	
	.login{
		width: 400px;
		height: 320px;
		background-color: white;
		position: absolute;
		right: 300px; 
		top: 250px;
		border-radius: 20px;
	}
	.login .top .title{
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
	.login .top .title img{
		width: 60px;
		height: 60px;
	}
	.login .top  p{
		text-align: center;
		margin-top: 0px;
		margin-bottom: 30px;
		color: #848e95;
	}
	.el-row {
	  margin-top: 20px;
	}
	.el-col{
		margin-left: 10%;
		margin-bottom: 0px;
	}
</style>
